<template>
    <div class="bodyBox">
        <scroll-view id="scrollView" scroll-y :style="{ height: screenHeight + 'px' }" :scroll-top="scrollLeftTop"
            refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh">
            <div class="topBox">
                <div class="returnBtn" @click="hendleReturnBtn">
                    <up-icon name="arrow-left" bold size="20"></up-icon>
                </div>
                <div class="imgBox" v-if="!isMe" @click="toUserData(articleData.user_code)">
                    <image class="topUserImg" :src="articleData.avatar_sign"></image>
                    <span>{{ articleData.user_name }}</span>
                </div>
                <div class="btnListImgBox">
                    <u-button size="small" type="" :text="$t('attention')" v-if="!articleData.if_follow && !isMe"
                        @click="attention(articleData)" :loading="btnLoading" :loadingText="' '"></u-button>
                    <up-button class="pinkBtn" size="small" v-else-if="articleData.if_follow && !isMe"
                        @click="attention2(articleData)">{{ $t('havepaidattention') }}</up-button>
                    <u-icon class="delIcon" name="trash-fill" size="24" v-else-if="isMe"
                        @click="delBtn(articleData)"></u-icon>
                </div>
                <span class="threeD" @click="delorjb" v-if="!isMe"><up-icon name="more-dot-fill"></up-icon></span>
            </div>
            <div style="height: calc(2.4rem + 1.25rem);"></div>
            <up-swiper :list="swiperList" indicator indicatorMode="line" circular :indicatorStyle="'dot'"
                height="1250rpx" @click="handleSwiperClick"></up-swiper>
            <div class="textBox">
                <h4>{{ articleData.funplay_title }}</h4>
                <div class="timeAndView">
                    <span>{{ formatTimeAgo(articleData.add_time) }}</span>
                    <span style="margin-left: 10rpx;">{{ $t('released') }}</span>
                    <!-- <span>&emsp;IP: 广东</span> -->
                </div>
                <div class="content">
                    <span>{{ articleData.funplay_content }}</span>
                </div>
                <div id="commentBox" style="height: 0.8rem;"></div>
                <div class="btnList">
                    <!-- <image :src="isXingActive ? '/static/images/xingxing2.png' : '/static/images/xingxing.png'"
                        @click="headleXing"></image>
                    <span class="liteText">123</span> -->
                    <!-- <image :src="articleData.if_likes ? '/static/images/xinxin2.png' : '/static/images/xinxin.png'"
                        @click="headleXin(articleData)"></image>
                    <span class="liteText" @click="headleXin(articleData)">{{ formatToWan(articleData.likes) }}</span> -->
                </div>
                <div style="height: 0.6rem;"></div>
            </div>
            <div class="commentBox">
                <span class="commentBoxText">
                    {{ $t('comments') }}({{ articleData.comments ? articleData.comments : 0 }})
                </span>
                <!-- <u-sticky bgColor="#fff">
                    <u-tabs :scrollable="false" lineWidth="150rpx" lineColor="#2F2425" :list="list1"
                        @click="tabsClick"></u-tabs>
                </u-sticky> -->
            </div>
            <div class="commentArea">
                <!-- <comment-section :commentData="commentData" :funplayCode="articleData.funplay_code"
                    @scrollToComment="scrollToComment" @commentListPages="commentListPages" /> -->
                <view class="comment-section">
                    <!-- :style="{ height: scrollHeight + 'px' }" -->
                    <scroll-view scroll-y="true" v-if="comments.length > 0" class="comment-list"
                        :style="{ height: 46 + 'vh' }">
                        <up-list @scrolltolower="bottoming">
                            <view v-for="(comment, index) in comments" :key="index" class="comment-item">
                                <view class="comment-header">
                                    <span class="comment-user">
                                        <!-- <image style="width: 1.8rem;height: 1.8rem;border-radius: 50%;vertical-align: middle;"
              src="https://img2.baidu.com/it/u=2287614273,1325409419&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=800">
            </image> -->
                                        <image class="userImg" style="" :src="comment.avatar_sign"
                                            @click="toUserData(comment.user_code)">
                                        </image>
                                        <div class="textBox2">
                                            <span class="boxUserName" @click="toUserData(comment.user_code)">{{
                                                comment.user_name }}
                                                <image
                                                    v-if="comment.user_name == userName && comment.user_code == articleData.user_code"
                                                    style="width: 1.4rem;height: 0.8rem;margin-left: 10rpx;"
                                                    src="/static/images/zz.png"></image>
                                            </span>
                                            <br>
                                            <span class="comment-time">{{ formatTimeAgo(comment.add_time_str) }}</span>
                                        </div>
                                        <!-- 评论3点 -->
                                        <span class="jbText" v-if="!comment.is_del_or_ban_comment"
                                            @click="replyClick(comment, comment.user_code == userCode)"><up-icon
                                                name="more-dot-fill"></up-icon></span>
                                    </span>
                                    <!-- <span class="comment-time">{{ formatTime(comment.time) }}</span> -->
                                </view>
                                <view class="comment-content" @click="prepareReply(index, null, comment)">{{
                                    comment.content }}</view>
                                <view class="comment-actions" @click="prepareReply(index, null, comment)">
                                    <span class="action-btn" v-if="!comment.is_del_or_ban_comment">
                                        <!-- <span class="dleCommentBtn" style="color: red;margin-right: 30rpx;"
                                            v-if="comment.user_name == userName && comment.user_code == userCode"
                                            @click.stop="handDleComment($event, comment)">{{ $t('delete')
                                            }}</span> -->
                                        <!-- {{ comment.likes || 0 }} {{ comment.is_liked_comment ? '取消点赞' : '点赞' }} -->
                                        <!-- 点赞 -->
                                        <!-- <image
                                            :src="comment.is_liked_comment ? '/static/images/xinxin2.png' : '/static/images/xinxin.png'"
                                            style="width: 35rpx;height: 35rpx;margin-right: 8rpx;"
                                            @click.stop="toggleLike(index, $event, comment)">
                                        </image>
                                        <span @click.stop="toggleLike(index, $event, comment)">{{
                                            formatToWan(comment.likes)
                                        }}</span> -->
                                        <!-- 点踩 -->
                                        <!-- <image class="disListCss" @click.stop="toggleDisLike(index, $event)"
                                            :src="comment.disLiked ? '/static/images/cai2.png' : '/static/images/cai.png'"
                                            style=" width: 35rpx;
    height: 35rpx;margin-left: 20rpx;">
                                        </image> -->
                                    </span>
                                    <!-- 回复 -->
                                    <span class="action-btn" v-if="!comment.is_del_or_ban_comment">{{ $t('Reply')
                                    }}</span>
                                </view>

                                <!-- 回复列表（平铺显示） -->
                                <view v-if="comment.children" class="replies-container">
                                    <view v-for="(reply, replyIndex) in visibleReplies(comment.children)"
                                        :key="reply.id || replyIndex" class="reply-item">
                                        <view class="reply-header">
                                            <span class="reply-user" @click="toUserData(reply.user_code)">
                                                <!-- <image style="width: 1.8rem;height: 1.8rem;border-radius: 50%;vertical-align: middle;"
                  src="https://img2.baidu.com/it/u=2287614273,1325409419&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=800">
                </image> -->
                                                <image class="userImg2" :src="reply.avatar_sign">
                                                </image>
                                                <span class="hfUser">{{ reply.user_name }}</span>
                                                <image
                                                    v-if="comment.user_name == userName && comment.user_code == articleData.user_code"
                                                    style="width: 1.4rem;height: 0.8rem;margin-left: 10rpx;margin-bottom: 0.5rem;"
                                                    src="/static/images/zz.png"></image>
                                            </span>
                                            <!-- @click="toUserData(reply.parent_code)" -->
                                            <text class="reply-to" v-if="reply.parent_name">{{ $t('Reply') }} @{{
                                                reply.parent_name
                                                }}</text>
                                            <!-- <span class="reply-time">{{ formatTime(reply.time) }}</span> -->
                                            <span class="reply-time">{{ formatTimeAgo(reply.add_time_str) }}</span>
                                            <!-- 评论3点 -->
                                            <span class="jbText" v-if="!reply.is_del_or_ban_comment"
                                                @click="replyClick(reply, reply.user_code == userCode)"><up-icon
                                                    name="more-dot-fill"></up-icon></span>
                                        </view>
                                        <view class="reply-content" @click="prepareReply(index, reply, comment)">{{
                                            reply.content }}</view>
                                        <view class="reply-actions" @click="prepareReply(index, reply, comment)">
                                            <span class="action-btn" v-if="!reply.is_del_or_ban_comment">
                                                <!-- <span class="dleCommentBtn" style="color: red;margin-right: 30rpx;"
                                                    v-if="reply.user_name == userName && reply.user_code == userCode"
                                                    @click.stop="handDleComment($event, reply)">{{ $t('delete')
                                                    }}</span> -->
                                                <!-- 点赞 -->
                                                <!-- <image
                                                    :src="reply.is_liked_comment ? '/static/images/xinxin2.png' : '/static/images/xinxin.png'"
                                                    style="width: 35rpx;height: 35rpx;margin-right: 8rpx;"
                                                    @click.stop="itemToggleLike(reply, replyIndex, $event)">
                                                </image>
                                                <span @click.stop="itemToggleLike(reply, replyIndex, $event)">{{
                                                    formatToWan(reply.likes) }}</span> -->
                                                <!-- 点踩 -->
                                                <!-- <image class="disListCss"
                                                    @click.stop="itemToggleDisLike(reply, replyIndex, $event)"
                                                    :src="reply.disLiked ? '/static/images/cai2.png' : '/static/images/cai.png'"
                                                    style=" width: 35rpx;
    height: 35rpx;margin-left: 20rpx;">
                                                </image> -->
                                            </span>
                                            <span class="action-btn" v-if="!reply.is_del_or_ban_comment"
                                                style="margin-left: 26rpx;">{{
                                                    $t('Reply')
                                                }}</span>
                                        </view>
                                    </view>

                                    <!-- 展开/收起按钮 -->
                                    <view v-if="comment.children.length > 2" class="expand-btn"
                                        @click="toggleReplies(index)">
                                        -----{{ comment.expanded ? $t('Closereply') :
                                            `${$t('Viewall')}${comment.children.length}${$t('replies')}` }}-----
                                    </view>
                                </view>
                            </view>
                        </up-list>
                    </scroll-view>
                    <div class="commentArea2" v-else>
                        <div class="noListBox">
                            <image class="noListImg" src="@/static/images/kongtou.png"></image>
                            <span class="noListText">等你的第一条评论~</span>
                        </div>
                    </div>

                    <view class="comment-input">
                        <up-textarea v-model="inputContent" ref="inputRef" confirm-type="send"
                            :class="isFocus2 ? 'marginBottom input' : 'input'" :focus="isFocus" :cursor-spacing="10"
                            :height="'1.675rem'" :maxlength="50"
                            :placeholder="replyToInfo.replyToIndex === -1 ? $t('tocomment') : `${$t('Reply')} @${comments[replyToInfo.replyToIndex]?.user_name}${replyToInfo.replyToReply ? '@' + replyToInfo.replyToReply.user_name : ''}`"
                            @confirm="submitContent" @focus="focus" @blur="blur" @update:modelValue="updateInput"
                            autoHeight></up-textarea>
                        <div class="submitBox" v-if="isFocus2">
                            <button @click="submitContent" class="submit-btn" :loading="btnLoading">{{ $t('sent')
                                }}</button>
                        </div>
                        <div class="xinxinBox" v-else>
                            <div class="xinxinItem" @click="headleXin(articleData)">
                                <image
                                    :src="articleData.if_likes ? '/static/images/xinxin2.png' : '/static/images/xinxin.png'">
                                </image>
                                <span class="xinxinText">{{
                                    formatToWan(articleData.likes)
                                    }}</span>
                            </div>
                            <div class="xinxinItem" @click="scrollToComment">
                                <image class="bubbleBox" src="@/static/images/bubble.png">
                                </image>
                                <span class="xinxinText">{{ articleData.comments ?
                                    articleData.comments : 0 }}</span>
                            </div>
                        </div>
                    </view>
                </view>
            </div>
            <div class="commentBox" v-if="showRelevanTontent">
                <span class="commentBoxText">
                    {{ $t('relevantcontent') }}
                </span>
                <div class="imgList">
                    <div class="gridItemBox" v-for="(listItem, listIndex) in gridList" :key="listIndex">
                        <div class="liteBox" @click="toArticleDetail(listItem)">
                            <div class="imgBox">
                                <image class="image" mode="aspectFill" :src="listItem.funplay_urls[0]" alt="" />
                            </div>
                            <span class="liteText">{{ listItem.funplay_title
                            }}</span>
                            <div class="liteFootle">
                                <image class="fontImg" src="@/static/images/xin.png" alt="" />
                                <span class="liteFootleNum">{{ formatToWan(listItem.likes) }}</span>
                                <span class="liteTitle">{{ listItem.user_name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 3.2rem;"></div>
            </div>
            <div class="footer" style="width: 100%;height: 76rpx;"></div>
        </scroll-view>
    </div>
    <up-popup :show="popupshow" mode="center" @close="close" @open="open">
        <view>
            <div class="popupBox">
                <div class="popupTop">
                    <u class="text" @click="rulesText">{{ $t('RuleAnnouncement') }}</u>
                    <span class="title">{{ $t('report') }}</span>
                </div>
                <div class="popList">
                    <span class="listText">{{ $t('Classificationofviolations') }}<span
                            style="color: red;">*</span></span>
                    <hr>
                    <div class="list">
                        <!-- <up-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange">
                            <up-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkboxList1"
                                :key="index" :label="item.name" :name="item.name">
                            </up-checkbox>
                        </up-checkbox-group> -->
                        <up-radio-group v-model="radioValue" placement="row">
                            <up-radio v-for="(item, index) in checkboxList1" :key="index" :label="item.name"
                                :name="item.name" :customStyle="{ marginBottom: '8px' }"></up-radio>
                        </up-radio-group>
                    </div>
                </div>
                <div class="poplyBox">
                    <span class="listText">{{ $t('Reasonforreporting') }}</span>
                    <hr>
                    <div class="reasonBox">
                        <up-textarea v-model="reasonData" :placeholder="t('Pleaseenterthereasonforreporting')" count
                            :maxlength="200"></up-textarea>
                    </div>
                </div>
                <div class="popBtnList">
                    <div class="qx">
                        <up-button :text="t('cancel')" size="small" @click="close"></up-button>
                    </div>
                    <div class="tj">
                        <up-button :text="t('submit')" size="small" @click="submitted"></up-button>
                    </div>
                </div>
            </div>
        </view>
    </up-popup>
    <u-popup :show="jbshow" mode="bottom" @close="jbclose" @open="jbopen">
        <view class="botText">
            <u-button :text="jbBtnText" :style="`color: ${jbBtnText == t('delete') ? '#FF0000' : ''};`"
                @click="jbbtntz"></u-button>
        </view>
    </u-popup>
    <upModal :modalWidth="'14.75rem'" :modalShow="modalShow" :modalText1="modalText1" :showImage="showImage"
        :isCancel="isCancel" @cancel="modalShow = false" @cloos="cloos"></upModal>
</template>

<script setup lang="ts">
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { getComment, setComment, commentDel, reportFunpaly, recommend, commentLike } from '@/api/article/article.js'
import { attentionAndNot, funpaly, funpalyLike, funpalyDel } from '@/api/index/index.js'
import { getFull } from "@/api/meApi/me.js"
import { formatTimeAgo } from "@/utils/timeUtils.js"
import upModal from '../../components/upModal.vue';
// import CommentSection from '../../components/comment.vue'
import { formatToWan } from '@/utils/numericalToW'
import { useI18n } from 'vue-i18n'
import { useDetails } from '@/stores/details';
const details = useDetails();
const { t } = useI18n()
// 当前登录用户的信息
const userCode = ref(uni.getStorageSync('userCode'))
const userName = ref(uni.getStorageSync('username'))
let modalText1 = ref(t('Doyouwanttocancelattention'))
let articleData = ref({
    funplay_code: '',
    funplay_title: '',
    funplay_content: '',
    images_sign: [],
    likes: 0,
    user_name: '',
    user_code: '',
    avatar_sign: '',
    add_time: '',
    if_likes: false,
    if_follow: false,
})// 页面数据
const screenWidth = ref(0) // 屏幕宽度，单位为px
const screenHeight = ref(0) // 屏幕高度，单位为px
const commentBoxTop = ref(0) // 评论盒子距离顶部的高度
const isCancel = ref(false)
const showImage = ref(false)
const isFJ = ref(false)
const ifNo = ref(false)
const popupshow = ref(false)
const jbshow = ref(false)
// const scrollHeight = ref(1800)
let scrollLeftTop = ref(0)// 顶部距离
const gridList = ref([])
const swiperList = ref([]);
// 点击轮播图处理函数
const handleSwiperClick = (index) => {// 轮播图点击，放大显示图片
    // 调用uniapp的图片预览接口
    uni.previewImage({
        current: index, // 当前点击的图片索引
        urls: swiperList.value,     // 所有图片URL数组
        indicator: 'number' // 可选：显示图片索引指示器
    })
}
const showRelevanTontent = ref(true)
const showUserData = ref(false)
const list1 = reactive([{ name: t('comments') },])
const tabsData = ref(t('comments'))
const tabsData2 = ref(t('relevantcontent'))
const reasonData = ref('')
const pages = ref(1)
const btnLoading = ref(false)
const clickingContent = ref('')// 举报类型，帖子为1，评论为2
const radioValue = ref(''); // 单选值
const ifZJTo = ref(false)// 是否来自足迹
const jbBtnText = ref('')
const havePhone = ref<Boolean>(false)
const getUserData = () => {// 获取用户信息
    getFull().then((res: object) => {
        if (res.code == 200) {
            if (res.data.phone) {
                havePhone.value = true
            }
        }
    })
}
const delorjb = () => {// 文章三个小点
    clickingContent.value = '1'// 举报帖子
    jbshow.value = true
    jbBtnText.value = t('Reportposts')
}
// 计算选中项的索引
const selectedIndex = computed(() => {
    const item = checkboxList1.find(item => item.name === radioValue.value);
    return item ? checkboxList1.indexOf(item) : -1;
});
const tabsClick = (item: any) => {
    tabsData.value = item.name;
}
let checkboxValue1 = reactive([]);// 复选框选中的内容
// 基本案列数据
const checkboxList1 = reactive([
    {
        name: t('bloodyviolence'),
        disabled: false,
    },
    {
        name: t('Pornographicandvulgar'),
        disabled: false,
    },
    {
        name: t('infringementofrightsandinterests'),
        disabled: false,
    },
    {
        name: t('disinformation'),
        disabled: false,
    },
    {
        name: t('personalattacks'),
        disabled: false,
    },
    {
        name: t('Incitingwarharassment'),
        disabled: false,
    },
    {
        name: t('advertisingmarketing'),
        disabled: false,
    },
    {
        name: t('Insultheroes'),
        disabled: false,
    },
    {
        name: t('illegalandillegal'),
        disabled: false,
    },
    {
        name: t('other'),
        disabled: false,
    },
]);
const checkboxChange = (value) => {

};
const triggered = ref(false)
const onRefresh = () => {// 下拉刷新函数
    triggered.value = true
    // page.value = 1
    // page2.value = 1
    // getFashionplay('1', 1)
    // getFashionplay2('1', 1)
    setTimeout(() => {
        triggered.value = false;
        uni.stopPullDownRefresh();// 关闭下来刷新动画效果
    }, 1000);
}
function open() {
    popupshow.value = true;
}
function close() {
    reasonData.value = ''
    radioValue.value = ''
    popupshow.value = false;
}
function jbopen() {
    jbshow.value = true;
}
function jbclose() {
    jbshow.value = false;
}
const submitted = () => {// 举报提交
    if (!havePhone.value) {// 判断是否绑定了手机号
        uni.navigateTo({
            url: '/pages/newAdd/bindnumber'
        })
        return
    }
    if (!radioValue.value) {
        uni.showToast({
            title: t('Requesttoselectreasonsforreporting'),
            icon: 'none',
            duration: 2000
        })
        return
    }
    let para = {}
    // console.log('rowItemData.value', rowItemData.value);
    if (clickingContent.value == '1') {
        para = {
            reported_type: clickingContent.value,
            reported_id: articleData.value.funplay_code,
            reported_user_id: articleData.value.user_code,
            reason: reasonData.value,
            report_reason_type: String(selectedIndex.value + 1),
        }
    } else {
        para = {
            reported_type: clickingContent.value,
            reported_id: rowItemData.value.comment_code,
            reported_user_id: rowItemData.value.user_code,
            reason: reasonData.value,
            report_reason_type: String(selectedIndex.value + 1),
        }
    }
    reportFunpaly(para).then((res: object) => {
        if (res.code == 200) {
            // uni.showToast({
            //     title: t('thereportissuccessful'),
            //     icon: 'none',
            //     duration: 2000
            // })
            modalText1.value = t('thereportissuccessful')
            showImage.value = true
            isCancel.value = false
            modalShow.value = true
            isFJ.value = true

            popupshow.value = false
            reasonData.value = ''
            radioValue.value = ''
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    }).finally(() => {

    })
}
const jbbtntz = () => {// 弹出层的按钮
    // console.log('111222333', jbBtnText.value == t('Reportposts'), jbBtnText.value == t('delete'));
    if (jbBtnText.value == t('Reportposts')) {// 举报
        // clickingContent.value = '1'
        popupshow.value = true
        jbshow.value = false
    } else if (jbBtnText.value == t('delete')) {// 删除
        delPara.value = {
            usercode: rowItemData.value.user_code,
            commentcode: rowItemData.value.comment_code,
        }
        modalText1.value = t('Whethertodeletecomments')
        showImage.value = true
        isCancel.value = true
        modalShow.value = true
    }
}
const tabsClick2 = (item: any) => {
    tabsData2.value = item.name;
}
const isXingActive = ref(false)
const headleXing = () => {
    isXingActive.value = !isXingActive.value
};
let rowItemData = ref({})// 被点击3小点的评论
const replyClick = (item: any, isme: Boolean) => {// 评论举报/删除按钮(3小点)
    clickingContent.value = '2'// 举报评论
    rowItemData.value = item
    if (isme) {
        jbshow.value = true
        jbBtnText.value = t('delete')
    } else {
        jbshow.value = true
        jbBtnText.value = t('Reportposts')
    }
    // clickingContent.value = '2'
    // open()
}
// 点赞按钮
const headleXin = (data: object) => {
    let para = {
        funplaycode: data.funplay_code,
        userCodeWithFun: data.user_code,
    }
    funpalyLike(para).then((res: object) => {
        if (res.code == 200) {
            data.if_likes = !data.if_likes
            if (data.if_likes) {
                data.likes++
            } else {
                data.likes--
            }
            // 储存新数据
            details.setItemData(data)
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.mes}`,
            icon: 'none',
            duration: 2000
        })
    })
};
// 返回键
const hendleReturnBtn = () => {
    uni.navigateBack()
}
// 跳转到用户主页
const toUserData = (data: string) => {
    uni.navigateTo({
        url: `/pages/me/userHomepage?data=${data}`,
    })
}
// 关注按钮
const attention = (data: object) => {
    btnLoading.value = true
    let para = {
        followUserCode: data.user_code,
        isFollow: true,
    }
    attentionAndNot(para).then((res: object) => {
        if (res.code === 200) {
            uni.pageScrollTo({
                selector: ".topBox",
                scrollTop: 0
            })
            data.if_follow = true
            // 储存新数据
            details.setItemData(data)
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.mes}`,
            icon: 'none',
            duration: 2000
        })
    }).finally(() => {
        btnLoading.value = false
    })
}
let attentionData = ref({})
// 取消关注按钮
const attention2 = (data: object) => {
    attentionData.value = data
    modalText1.value = t('Doyouwanttocancelattention')
    showImage.value = true
    isCancel.value = true
    modalShow.value = true
}
// 弹窗按钮
const cloos = () => {
    if (isFJ.value) {// 如果是封禁提示弹窗
        modalShow.value = false
        isFJ.value = false
        return
    }
    if (ifNo.value) {// 如果是封禁提示弹窗
        // 返回上一个页面
        uni.navigateBack()
        return
    }
    if (modalText1.value == t('Whethertodeletethepost')) {// 删除帖子
        funpalyDel(articleData.value.funplay_code).then((res: object) => {
            if (res.code === 200) {
                uni.showToast({
                    title: '删除成功',
                    icon: 'none',
                    duration: 1000
                })
                setTimeout(() => {
                    uni.navigateBack()
                }, 1000)
            }
        }).catch((err: object) => {
            uni.showToast({
                title: `${err.mes}`,
                icon: 'none',
                duration: 2000
            })
        }).finally(() => {

        })
    } else if (modalText1.value == t('Doyouwanttocancelattention')) {// 取消关注
        let para = {
            followUserCode: attentionData.value.user_code,
            isFollow: false,
        }
        attentionAndNot(para).then((res: object) => {
            if (res.code === 200) {
                attentionData.value.if_follow = false
                // 储存新数据
                details.setItemData(attentionData.value)
            } else {
                uni.showToast({
                    title: `${res.msg}`,
                    icon: 'none',
                    duration: 2000
                })
            }
        }).catch((err: object) => {
            uni.showToast({
                title: `${err.mes}`,
                icon: 'none',
                duration: 2000
            })
        }).finally(() => {
            modalShow.value = false;
        })
    } else if (modalText1.value == t('Whethertodeletecomments')) {// 删除评论
        commentDel(delPara.value).then((res) => {
            if (res.code == 200) {
                uni.showToast({
                    title: '删除成功',
                    icon: "none",
                    duration: 2000
                })
                getCommentData(articleData.value, 0)
            } else {
                uni.showToast({
                    title: `${res.msg}`,
                    icon: "none",
                    duration: 2000
                })
            }
        }).catch((err) => {
            uni.showToast({
                title: `${err.msg}`,
                icon: "none",
                duration: 2000
            })
        }).finally(() => {
            modalShow.value = false
            jbshow.value = false
        })
    }
}
const rulesText = () => { // 规则公告点击
    uni.navigateTo({
        url: `/pages/agreementBook/agreement?title=${t('Announcementrules')}&urlData=http://47.119.43.199/html2/reportingRules.html`,
    })
}
// 滚动到评论区
const scrollToComment = () => {
    // #ifdef H5
    document.getElementById('commentBox')?.scrollIntoView({ behavior: 'smooth' });
    // #endif

    // #ifndef H5
    scrollLeftTop.value = commentBoxTop.value / 2

    uni.createSelectorQuery()
        .select('#commentBox')
        .boundingClientRect(rect => {
            if (rect) {
                scrollLeftTop.value = commentBoxTop.value
            }
        }).exec()
    // #endif
};
// 相关内容点击
const toArticleDetail = (row: any) => {
    // console.log("row:", row)
    uni.navigateTo({
        url: `/pages/advertisements/articleDetails?data=${row.funplay_code}`
    })
}
onMounted(() => {
    uni.getSystemInfo({
        success: (res: object) => {
            screenWidth.value = res.windowWidth; // 屏幕宽度，单位为px
            screenHeight.value = res.windowHeight; // 屏幕高度，单位为px
        },
    });
    // 延迟1秒执行
    setTimeout(() => {
        // 获取评论盒子距离顶部的高度
        uni.createSelectorQuery()
            .select('#commentBox')
            .boundingClientRect((res: object) => {
                if (res) {
                    commentBoxTop.value = res.top
                }
            }).exec()
    }, 100);

    uni.getSystemInfo({
        success: (res) => {
            const query = uni.createSelectorQuery().in(this)
            query.select('.comment-input').boundingClientRect(data => {
                scrollHeight.value = res.windowHeight - data.height - 20
            }).exec()
        }
    })
})
onPullDownRefresh(() => {
    console.log('触发下拉刷新')
    getData(0)
    setTimeout(() => {
        uni.stopPullDownRefresh();// 关闭下拉刷新动画效果
    }, 1000);
})
// 子组件上拉触底事件
const commentListPages = () => {
    // getCommentData(articleData.value, 1)
}
// 评论数据
let commentData = ref([])
const optionsData = ref('')
const dplID = ref(uni.getStorageSync('dplID'))
// 获取数据
const getData = (number: number) => {
    funpaly(optionsData.value).then(async (res: object) => {
        if (res.code === 200) {
            articleData.value = res.data;
            details.setItemData(articleData.value)
            swiperList.value = res.data.images_sign;
            // if (number === 0) getCommentData(articleData.value, 0)
            getCommentData(articleData.value, 0)
            if (articleData.value.user_code) {// 判断是否是自己发布的帖子
                isMe.value = articleData.value.user_code == userCode.value ? true : false
            }
            if (!ifZJTo.value) {
                // 缓存图片
                let imgList = []
                const downloadPromises = swiperList.value.map((item: any) => {
                    return new Promise(async (resolve, reject) => {
                        // uni.downloadFile({// 下载图片
                        //     url: item,
                        //     success: (res) => {
                        //         if (res.statusCode === 200) {
                        //             uni.saveFile({// 保存图片
                        //                 tempFilePath: res.tempFilePath, //临时路径
                        //                 success: function (data) {
                        //                     imgList.push(data.savedFilePath)
                        //                     console.log('imgList999', imgList);
                        //                 }
                        //             });
                        //             resolve(res.tempFilePath)
                        //         } else {
                        //             reject(new Error('Download failed'))
                        //         }
                        //     },
                        //     fail: (err) => {
                        //         reject(err)
                        //     }
                        // })

                        try {
                            const res = await new Promise((resolve, reject) => {
                                uni.downloadFile({
                                    url: item,
                                    success: resolve,
                                    fail: reject
                                });
                            });

                            if (res.statusCode === 200) {
                                const data = await new Promise((resolve, reject) => {
                                    uni.saveFile({
                                        tempFilePath: res.tempFilePath,
                                        success: resolve,
                                        fail: reject
                                    });
                                });

                                imgList.push(data.savedFilePath);
                                resolve(data.savedFilePath);
                            } else {
                                reject(new Error('Download failed'));
                            }
                        } catch (err) {
                            reject(err);
                        }
                    })
                })
                Promise.all(downloadPromises)
                    .then(() => {
                        // #ifndef H5
                        // plus.storage.removeItem('optionsData') // 清除缓存
                        let zjList: any[] = []
                        // 获取缓存的足迹
                        const optionsData = plus.storage.getItem('optionsData' + dplID.value)
                        if (optionsData) {
                            let zjData = JSON.parse(optionsData)
                            zjList = [...zjData]
                        }
                        // 储存足迹数据
                        const jsonData = {
                            ...res.data,
                            images_sign: imgList,
                            images_sign0: imgList[0],// 用作封面图
                        }
                        if (jsonData.errMsg) return
                        const index = zjList.findIndex(item => item.funplay_code === jsonData.funplay_code)
                        if (index !== -1) {
                            // 如果存在，先删除该对象
                            zjList.splice(index, 1);
                        }
                        // 将新对象添加到数组前面
                        zjList.unshift(jsonData);
                        if (zjList.length > 100) {// 只保留100条数据
                            zjList.splice(100)
                        }
                        // 将 res.data 转换为 JSON 字符串
                        let plusData = JSON.stringify(zjList)
                        plus.storage.setItem('optionsData' + dplID.value, plusData) // 储存足迹信息
                        // #endif
                    })
                    .catch(err => {
                        console.error('图片下载出错:', err)
                    })
            } else {
                // #ifndef H5
                // plus.storage.removeItem('optionsData' + dplID.value) // 清除缓存
                let zjList: any[] = []
                // 获取缓存的足迹
                const optionsData = plus.storage.getItem('optionsData' + dplID.value)
                if (optionsData) {
                    let zjData = JSON.parse(optionsData)
                    zjList = [...zjData]
                }
                // 储存足迹数据
                const jsonData = {
                    ...res.data,
                }
                if (jsonData.errMsg) return
                const index = zjList.findIndex(item => item.funplay_code === jsonData.funplay_code)
                if (index !== -1) {
                    // 如果存在，先删除该对象
                    zjList.splice(index, 1);
                }
                // 将新对象添加到数组前面
                zjList.unshift(jsonData);
                if (zjList.length > 100) {// 只保留100条数据
                    zjList.splice(100)
                }
                // 将 res.data 转换为 JSON 字符串
                let plusData = JSON.stringify(zjList)
                plus.storage.setItem('optionsData' + dplID.value, plusData) // 储存足迹信息
                // #endif
            }
        } else if (res.code == 13132003) {// 内容不存在
            modalText1.value = t('itbeendeleted')
            ifNo.value = true
            showImage.value = true
            isCancel.value = false
            modalShow.value = true
        } else {
            setTimeout(() => {
                uni.showToast({
                    title: `${res.msg}`,
                    icon: 'none',
                    duration: 2000
                })
            }, 50)
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.mes}`,
            icon: 'none',
            duration: 2000
        })
    })
}
const getCommentData = (data: object, num: number) => { // 获取评论数据
    // console.log('pages.value', pages.value);
    if (num == 0) {
        commentData.value = []
        pages.value = 1
    } else if (num == 1) {
        pages.value++
    } else {
        let para = {
            funplaycode: data.funplay_code,
            current: pages.value
        }
        getComment(para).then((res: object) => {
            if (res.code === 200) {
                commentData.value = res.data
            } else {
                uni.showToast({
                    title: `${t('Commentacquisitionfailed')}!${res.msg}`,
                    icon: 'none',
                    duration: 2000
                })
            }
        }).catch((err: object) => {
            uni.showToast({
                title: `${t('Commentacquisitionfailed')}!${err.mes}`,
                icon: 'none',
                duration: 2000
            })
        })
        return
    }
    let para = {
        funplaycode: data.funplay_code,
        current: pages.value
    }
    getComment(para).then((res: object) => {
        if (res.code === 200) {
            // commentData.value.push(...res.data)
            commentData.value = res.data// 后端问题，暂时先不分页
        } else {
            uni.showToast({
                title: `${t('Commentacquisitionfailed')}!${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${t('Commentacquisitionfailed')}!${err.mes}`,
            icon: 'none',
            duration: 2000
        })
    })
}
const delBtn = (data: object) => { // 删除帖子
    modalText1.value = t('Whethertodeletethepost')
    showImage.value = true
    isCancel.value = true
    modalShow.value = true
}
const isMe = ref(false)
const getgridList = () => {// 获取相关内容
    recommend().then((res: object) => {
        if (res.code == 200) {
            gridList.value = res.data
        }
    }).catch((err: object) => {
        uni.showToast({
            title: `${err.mes}`,
            icon: 'none',
            duration: 2000
        })
    })
}
onLoad((options: object) => {
    getUserData()
    isMe.value = false
    if (options.data) {
        optionsData.value = options.data;
        getData(0)
    }
    if (options.forget == t('comments')) {// 如果点击的是评论，直接下拉到评论区
        setTimeout(() => {
            scrollToComment();
        }, 500);
    }
    getgridList()
    if (options.forget == t('tabbarMine')) {
        isMe.value = true
    } else if (options.forget == t('preview')) {
        if (options.previewData) {
            articleData.value = JSON.parse(options.previewData)
            // console.log('123123', articleData.value);
        }
    } else if (options.forget == 4) {
        ifZJTo.value = true
    }
    if (options.text == t('footprint')) {
        showUserData.value = true
    } else {
        showUserData.value = false
    }
});
onShow(() => {

})

// 评论区
const modalShow = ref(false)
// 当前登录用户的信息
const userId = ref(uni.getStorageSync('dplID'))
const avatarSrc = ref(uni.getStorageSync('avatarUrl'))
// 评论数据
let comments = ref(commentData)
// 监听 commentData 的变化
// watch(() => commentData, (newValue) => {
//     comments.value = newValue
// }, { deep: true })
// 处理评论数据结构
function flattenChildren(arr) {
    let result = [];
    for (let item of arr) {
        result.push(item);
        if (item.children && item.children.length > 0) {
            result = result.concat(flattenChildren(item.children));
            // 清空当前的 children 数组，因为我们要把所有孩子都提升到第一层
            item.children = [];
        }
    }
    return result;
}
comments.value = comments.value.map(item => {
    return {
        ...item,
        children: flattenChildren(item.children)
    };
});
let isFocus = ref(false)
// 输入框内容
const inputContent = ref('')
// 当前正在回复的评论索引和回复对象
const replyToInfo = ref({
    replyToIndex: -1,  // 评论索引
    replyToReply: null // 回复对象（如果是回复回复）
})
// 输入框引用
const inputRef = ref(null)
// 滚动区域高度
const scrollHeight = ref(500)
let commentItemData = ref({})
let commentIndex = ref(null)
const respondent = ref('')// 被回复人
// 准备回复
const prepareReply = (index: number, reply: any, comment: object) => {
    respondent.value = comment.user_name
    commentItemData.value = comment
    // console.log("🚀commentItemData.value:", commentItemData.value.is_del_or_ban_comment)
    if (commentItemData.value.is_del_or_ban_comment) {// 如果是已经删除的评论
        uni.showToast({
            title: t('Unabletothiscomment'),
            icon: 'none'
        })
        return
    }
    commentIndex.value = index
    isFocus.value = true
    replyToInfo.value = {
        replyToIndex: index,
        replyToReply: reply || null
    }
    inputContent.value = ''
    scrollToComment()
}
const bottoming = () => {// 上拉触底事件
    commentListPages()
}
const replyToReplyData = ref('')// 被回复的评论人
// 提交内容（评论或回复）
const submitContent = () => {
    if (!havePhone.value) {// 判断是否绑定了手机号
        uni.navigateTo({
            url: '/pages/newAdd/bindnumber'
        })
        return
    }
    // console.log('提交内容', inputContent.value.trim());
    if (!inputContent.value.trim()) {
        uni.showToast({
            title: t('contentcannotbeblank'),
            icon: 'none'
        })
        return
    }
    let para = {
        funpaly_code: articleData.value.funplay_code,
        user_code: userCode.value,
        parent_code: commentItemData.value.comment_code ? commentItemData.value.comment_code : '0',
        answer_code: replyToInfo.value.replyToReply ? replyToInfo.value.replyToReply.user_name : commentItemData.value.user_code,// : articleData.value.user_code
        content: inputContent.value,
    }
    btnLoading.value = true

    // 静态提交到页面-头
    // const { replyToIndex, replyToReply } = replyToInfo.value
    // replyToReplyData.value = replyToReply?.user_name
    // if (replyToIndex === -1) {// 回复帖子
    //     // 提交新评论
    //     const comment = {
    //         user_name: userName.value,
    //         user_code: userCode.value,
    //         content: inputContent.value.trim(),
    //         add_time_str: formatTime(new Date()),
    //         likes: 0,
    //         is_liked_comment: false,
    //         expanded: false,
    //         children: [],
    //         avatar_sign: avatarSrc.value,
    //         // comment_code
    //         // parent_code
    //     }
    //     comments.value.unshift(comment)
    // } else {// 回复评论
    //     const baseReply = {
    //         user_name: userName.value,
    //         user_code: userCode.value,
    //         content: inputContent.value.trim(),
    //         add_time_str: formatTime(new Date()),
    //         avatar_sign: avatarSrc.value,
    //     }
    //     // const reply = respondent.value ? { ...baseReply, parent_name: respondent.value } : { ...baseReply, parent_name: comments.value[replyToIndex].user_name }
    //     const reply = replyToInfo.value.replyToReply ? { ...baseReply, parent_name: replyToInfo.value.replyToReply.user_name } : { ...baseReply, parent_name: respondent.value }
    //     // 添加唯一ID
    //     reply.id = Date.now() + Math.random().toString(36).substr(2, 9)

    //     if (!comments.value[replyToIndex].children) {
    //         comments.value[replyToIndex].children = []
    //     }

    //     // 如果是回复回复，找到原始回复并添加
    //     if (replyToReply) {
    //         comments.value[replyToIndex].children.unshift(reply)
    //     } else {
    //         // 如果是直接回复评论，可以添加到开头或结尾
    //         comments.value[replyToIndex].children.unshift(reply)
    //     }
    // }
    // 静态提交到页面-尾

    setComment(para).then((res: object) => {
        if (res.code == 200) {
            getData(1)
        } else if (res.code == 993) {// 被封禁了
            modalText1.value = res.msg
            isFJ.value = true
            showImage.value = true
            isCancel.value = false
            modalShow.value = true
        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
        }
    }).finally(() => {
        // 重置状态
        btnLoading.value = false
        inputContent.value = ''
        replyToInfo.value = { replyToIndex: -1, replyToReply: null }
        commentItemData.value = {}
        commentIndex.value = null
    })
}
let delPara = ref({})
const handDleComment = (event, item) => {// 评论删除
    event.stopPropagation(); // 阻止事件冒泡
    // console.log('item', item.user_code, item.comment_code);
    delPara.value = {
        usercode: item.user_code,
        commentcode: item.comment_code,
    }
    modalText1.value = t('Whethertodeletecomments')
    showImage.value = false
    isCancel.value = true
    modalShow.value = true
}
// 点赞/取消点赞
const toggleLike = (index, event, comment) => {
    event.stopPropagation(); // 阻止事件冒泡
    if (comments.value[index].is_liked_comment) {
        comments.value[index].likes--
    } else {
        comments.value[index].likes++
    }
    comments.value[index].is_liked_comment = !comments.value[index].is_liked_comment

    let para = {
        commentId: comment.comment_code,
        isLikeComment: comments.value[index].is_liked_comment
    }
    commentLike(para).then((res: any) => {
        if (res.code == 200) {

        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
            comments.value[index].is_liked_comment = !comments.value[index].is_liked_comment
        }
    }).catch((err: any) => {
        uni.showToast({
            title: `${err.mes}`,
            icon: 'none',
            duration: 2000
        })
        comments.value[index].is_liked_comment = !comments.value[index].is_liked_comment
    })
}
// 点踩
const toggleDisLike = (index, event) => {
    event.stopPropagation(); // 阻止事件冒泡
    // if (comments.value[index].disLiked) {
    //   comments.value[index].likes--
    // } else {
    //   comments.value[index].likes++
    // }
    comments.value[index].disLiked = !comments.value[index].disLiked
}
// 子项的点赞/取消点赞
const itemToggleLike = (row, index, event) => {
    event.stopPropagation(); // 阻止事件冒泡
    // console.log(row, index);
    if (row.is_liked_comment) {
        row.likes--
    } else {
        row.likes++
    }
    row.is_liked_comment = !row.is_liked_comment

    let para = {
        commentId: row.comment_code,
        isLikeComment: row.is_liked_comment
    }
    commentLike(para).then((res: any) => {
        if (res.code == 200) {

        } else {
            uni.showToast({
                title: `${res.msg}`,
                icon: 'none',
                duration: 2000
            })
            row.is_liked_comment = !row.is_liked_comment
        }
    }).catch((err: any) => {
        uni.showToast({
            title: `${err.mes}`,
            icon: 'none',
            duration: 2000
        })
        row.is_liked_comment = !row.is_liked_comment
    })
}
// 子项的点踩
const itemToggleDisLike = (row, index, event) => {
    event.stopPropagation(); // 阻止事件冒泡
    // console.log(row, index);
    // if (row.is_liked_comment) {
    //   row.likes--
    // } else {
    //   row.likes++
    // }
    row.disLiked = !row.disLiked
}
// 切换回复的展开/收起状态
const toggleReplies = (index) => {
    comments.value[index].expanded = !comments.value[index].expanded
}

// 获取可见的回复（默认显示2条）
const visibleReplies = (children) => {
    const commentIndex = comments.value.findIndex(c => c.children === children)
    if (!comments.value[commentIndex].expanded) {
        return children.slice(0, 2)
    }
    return children
}
const isFocus2 = ref(false)// 焦点状态2
const focus = () => {
    isFocus.value = true
    isFocus2.value = true
    scrollToComment()
}
const blur = () => {// 失去焦点
    // 重置状态
    isFocus.value = false
    // 延迟1秒后执行
    setTimeout(() => {
        isFocus2.value = false
        // inputContent.value = ''
        replyToInfo.value = { replyToIndex: -1, replyToReply: null }
    }, 10)
}
const updateInput = () => {
    if (inputContent.value.length >= 50) {
        uni.showToast({
            title: t('Comments50words'),
            icon: 'none',
            duration: 2000
        })
    }
}
// 时间格式化
const formatTime = (timestamp) => {
    const data = new Date(timestamp);
    const month = data.getMonth() + 1;
    const day = data.getDate();
    const year = data.getFullYear();
    const hours = data.getHours();
    const minutes = data.getMinutes();
    const seconds = data.getSeconds();
    const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    return formattedTime;
}
</script>
<style scoped lang="scss">
.bodyBox {
    width: 100%;
    height: calc(100vh);
    overflow-y: auto;
    // background-color: #fff;
    position: relative;

    .topBox {
        width: 100%;
        height: calc(2.4rem);
        padding-top: 2.4rem;
        background-color: #fff;
        z-index: 9999;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;

        .returnBtn {
            margin: 0 20rpx;
        }

        .imgBox {
            display: flex;
            align-items: center;

            .topUserImg {
                width: 2.2rem;
                height: 2.2rem;
                border-radius: 50%;
                margin-right: 10rpx;
                vertical-align: middle;
            }
        }

        .btnListImgBox {
            display: inline-block;
            max-width: 8.8rem;
            position: absolute;
            right: 80rpx;
            margin-left: 20rpx;

            .u-button {
                background-color: #fff;
                color: #000;
                border: 1rpx solid #ccc;
                border-radius: 15px;
            }

            .pinkBtn {
                background-color: #de868f;
                color: #fff;
            }

            .delIcon {
                margin-right: -2rem;
            }
        }

        .threeD {
            position: absolute;
            right: 30rpx;
        }
    }

    .textBox {
        width: calc(100% - 40rpx);
        padding: 20rpx;
        padding-bottom: 0;
        background-color: #fff;

        .timeAndView {
            color: #6C6C6C;
            font-size: 24rpx;
            margin: 6rpx 0;
        }

        .content {
            font-size: 26rpx;
        }

        .btnList {
            width: 100%;
            margin-top: 10rpx;
            margin-bottom: 10rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            image {
                width: 35rpx;
                height: 35rpx;
                margin-right: 10rpx;
                margin-left: 50rpx;
            }
        }
    }

    .commentBox {
        width: 100%;
        height: 2.75rem;
        background-color: #EAB3B8;
        border-radius: 15px 15px 0 0;

        .commentBoxText {
            font-size: 26rpx;
            font-weight: bold;
            color: #C74C44;
            line-height: 2.75rem;
            margin-left: 30rpx;
        }

        .imgList {
            width: 100%;
            height: 14.8rem;
            padding-top: 20rpx;
            // padding-bottom: 20rpx;
            background-color: #fff;
            display: flex;
            flex-direction: row;
            /* 默认就是row，可以不写 */
            overflow-x: auto;
            /* 启用水平滚动 */
            // white-space: nowrap;
            /* 防止子元素换行 */

            .gridItemBox {
                width: 45%;
                margin-left: 20rpx;
                padding-top: 15rpx;
                padding-bottom: 5rpx;
                background-color: #fff;
                border-radius: 10px;
                flex: 0 0 auto;

                .liteBox {
                    width: 86%;
                    height: 100%;
                    margin: 0 auto;

                    .liteText {
                        width: 100%;
                        min-height: 2rem;
                        margin-left: 2%;
                        margin-top: .65rem;
                        font-size: 28rpx;
                        overflow: hidden;
                        word-break: break-all;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                    }

                    .imgBox {
                        width: 290rpx;
                        height: 290rpx;
                        // position: relative;
                        overflow: hidden;
                        border-radius: 30rpx;

                        .image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .liteFootle {
                        width: 100%;
                        margin-top: 10rpx;
                        margin-bottom: 10rpx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .fontImg {
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }

                        .liteTitle {
                            width: 57%;
                            text-align: right;
                            color: #707070;
                            font-size: 24rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin-left: auto;
                            word-break: break-all;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            line-clamp: 1;
                        }

                        .liteFootleNum {
                            font-size: 0.75rem;
                        }
                    }
                }
            }
        }
    }

    .commentArea {
        width: 100%;
        // margin-bottom: 10rpx;

        // 评论区样式
        .comment-section {
            height: 46vh;
            /* padding: 20rpx; */
            background-color: #f5f5f5;
            overflow-y: auto;
        }

        .comment-list {
            .u-list {
                width: 100%;
                height: 100% !important;
            }
        }

        .comment-item {
            background-color: #fff;
            padding: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 10rpx;
        }

        .comment-header {
            // display: flex;
            // justify-content: space-between;
            margin-bottom: 10rpx;
        }

        .comment-user {
            font-weight: bold;
            color: #333;
            display: flex;
            position: relative;

            .jbText {
                font-size: 24rpx;
                color: #CDCACA;
                font-weight: bold;
                position: absolute;
                top: 0.3rem;
                right: 1rem;
            }

            .textBox2 {
                display: inline-block;

                .boxUserName {
                    font-size: 28rpx;
                    font-weight: normal;
                    color: #000;
                }

                span {
                    display: inline-block;
                }
            }

            .userImg {
                width: 2.2rem;
                height: 2.2rem;
                border-radius: 50%;
                vertical-align: middle;
                margin-top: 10rpx;
                margin-right: 10rpx;
            }
        }

        .comment-time {
            color: #999;
            font-size: 24rpx;
            font-weight: 400;
        }

        .comment-content {
            width: 90%;
            // max-height: 2.4rem;
            color: #000000;
            font-size: 28rpx;
            line-height: 1.5;
            margin-bottom: 15rpx;
            margin-left: 10%;
            /* 优先在单词间断行 */
            overflow-wrap: break-word;
            /* 兼容旧浏览器的等效属性 */
            word-wrap: break-word;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp: 2;
            // -webkit-box-orient: vertical;
        }

        .comment-actions {
            display: flex;
            justify-content: flex-end;
            gap: 30rpx;
        }

        .action-btn {
            color: #007aff;
            font-size: 24rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-right: 20rpx;

            image {
                width: 35rpx;
                height: 35rpx;
                margin-right: 10rpx;
            }

            .disListCss {
                margin-left: 30rpx;
            }

            .dleCommentBtn {
                color: red;
                margin-right: 30rpx;
            }
        }

        /* 回复列表样式 */
        .replies-container {
            margin-top: 20rpx;
            padding-left: 40rpx;
            border-left: 2rpx solid #eee;
        }

        .reply-item {
            background-color: #f9f9f9;
            padding: 15rpx;
            margin-bottom: 15rpx;
            border-radius: 8rpx;
            position: relative;

            .jbText {
                font-size: 24rpx;
                color: #CDCACA;
                font-weight: bold;
                position: absolute;
                top: 0.8rem;
                right: 1rem;
            }
        }

        .reply-header {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;
            font-size: 24rpx;
        }

        .reply-user {
            font-weight: bold;
            color: #333;
            margin-right: 10rpx;

            .userImg2 {
                width: 2.2rem;
                height: 2.2rem;
                border-radius: 50%;
                vertical-align: middle;
            }

            .hfUser {
                font-size: 28rpx;
                color: #000000;
                font-weight: normal;
                display: inline-block;
                max-width: 8rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: middle;
                margin-left: 10rpx;
                margin-bottom: 1.5rem;
            }
        }

        .reply-time {
            color: #999;
            margin-right: 10rpx;
            position: absolute;
            top: 2rem;
            left: 3rem;
        }

        .reply-to {
            margin-bottom: 1.5rem;
            max-width: 9rem;
            color: #007aff;
            white-space: nowrap;
            /* 禁止换行 */
            overflow: hidden;
            /* 隐藏溢出内容 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }

        .reply-content {
            width: 90%;
            // max-height: 2.4rem;
            color: #000000;
            line-height: 1.4;
            font-size: 28rpx;
            margin-left: 10%;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp: 2;
            // -webkit-box-orient: vertical;
        }

        .reply-actions {
            margin-top: 8rpx;
            display: flex;
            justify-content: flex-end;
        }

        .expand-btn {
            color: #007aff;
            font-size: 24rpx;
            text-align: center;
            padding: 10rpx 0;
            margin-top: 10rpx;
        }

        .comment-input {
            width: 100%;
            display: flex;
            // align-items: center;
            background-color: #fff;
            padding: 18rpx 0;
            // border-radius: 10rpx;
            position: fixed;
            bottom: 0;
            border-top: 1rpx solid #c5c5c5;
            z-index: 9999;

            image {
                width: 35rpx;
                height: 35rpx;
                margin-bottom: 6rpx;
            }

            // .liteText {
            //     width: 25%;
            //     display: inline-block;
            //     text-align: center;
            //     margin-right: 10rpx;
            //     margin-bottom: 4rpx;
            // }

            .submitBox {
                position: absolute;
                right: 10rpx;
                bottom: 10rpx;
            }

            .xinxinBox {
                width: 34%;
                display: flex;
                align-items: flex-end;
                margin-bottom: 6rpx;

                .xinxinItem {
                    width: 45%;
                    display: flex;
                    justify-content: space-around;
                    // align-items: center;

                    .bubbleBox {
                        margin-right: 10rpx;
                        margin-left: 10rpx;
                    }

                    .xinxinText {}
                }
            }

            .input {
                // flex: 1;
                padding: 5rpx 20rpx 0;
                margin-right: 20rpx;
                margin-left: 10rpx;
                // height: 60rpx;
                background-color: #f5f5f5;
                border-radius: 40rpx;
            }

            .marginBottom {
                margin-bottom: 50rpx;
            }
        }

        .submit-btn {
            width: 120rpx;
            height: 1.575rem;
            line-height: 1.575rem;
            background-color: #EAB3B8;
            color: #fff;
            border-radius: 40rpx;
            font-size: 28rpx;
            margin-right: 6rpx;
        }

    }

    .commentArea2 {
        width: 100%;
        height: 46vh;

        .noListBox {
            width: 50%;
            height: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .noListImg {
                width: 350rpx;
                height: 350rpx;
            }

            .noListText {
                font-size: 30rpx;
                color: #000;
            }
        }
    }

    ::v-deep .u-swiper__wrapper__item__wrapper__image {
        // 轮播图上下填充的背景颜色
        background-color: #ffffff;

        div {
            background-size: contain !important;
        }
    }

}

.popupBox {
    width: 20rem;
    border-radius: 0.5rem;

    .popupTop {
        width: 100%;
        height: 2rem;
        margin-top: 16rpx;
        text-align: center;
        position: relative;

        .text {
            font-size: 24rpx;
            color: #6C6C6C;
            position: absolute;
            left: 30rpx;
            margin-top: 10rpx;
        }

        .title {
            display: inline-block;
            margin-top: 10rpx;
            font-weight: bold;
        }
    }

    .popList {
        margin-top: 30rpx;
    }

    .popList,
    .poplyBox {
        width: 100%;

        .listText {
            display: inline-block;
            margin-left: 30rpx;
            font-size: 30rpx;
            color: #737373;
        }

        .list {
            width: 80%;
            margin: 10rpx auto;

            .u-checkbox {
                width: 50%;
            }

            .u-radio {
                width: 45%;
            }
        }

        .reasonBox {
            width: 90%;
            margin: 30rpx auto 0;
        }
    }

    .popBtnList {
        width: 80%;
        text-align: right;
        margin: 20rpx auto 0;

        .u-button {
            width: 130rpx;
            color: #fff;
            font-weight: 600;
            border-radius: 10px;
            background-color: #de868f;
            border: 1px solid #bbbbbb;
            margin: 20rpx auto;
        }

        .qx {
            display: inline-block;

            .u-button {
                background-color: #888888;
                border: 1px solid #bbbbbb;
                margin-right: 20rpx;
            }
        }

        .tj {
            display: inline-block;
        }
    }
}

.botText {
    // width: 100%;
    height: 4.25rem;

    ::v-deep .u-button {
        margin: 0 auto;
        margin-top: 40rpx;
        width: 90%;
        font-weight: bold;
        border-radius: 0.8rem;
        color: #000;
    }
}

::v-deep .u-popup__content {
    border-radius: 1.2rem;
}
</style>